<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上移下移删除</title>
    <style>
        .list-item {
            border: 1px solid #ccc;
            padding: 4px;
            margin-bottom: 5px;
        }
        ul li{
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div id="items-container">
        <!-- List items will be added here -->
    </div>
    <ul id="myList" element class=".list-item">
        <li> <input type="text" id="newItem" placeholder="c"><button class="move-up">上移</button><button class="move-down">下移</button><button class="delete">删除</button></li>
        <li><input type="text" id="newItem" placeholder="java"><button class="move-up">上移</button><button class="move-down">下移</button><button class="delete">删除</button></li>
        <li><input  id="newItem" placeholder="python"><button class="move-up">上移</button><button class="move-down">下移</button><button class="delete">删除</button></li>
      </ul>
      <button id="addItem">添加</button>
      <input type="text" id="newItem" placeholder="     ">
    <script>
 document.getElementById('addItem').addEventListener('click', function() {
  var newItem = document.getElementById('newItem').value;
  if (newItem) {
    var ul = document.getElementById('myList');
    ul.insertAdjacentHTML('beforeend', '<li>' + newItem + '<button class="move-up">↑</button><button class="move-down">↓</button><button class="delete">X</button></li>');
    document.getElementById('newItem').value = '';
  }
});
 
document.getElementById('myList').addEventListener('click', function(e) {
  var target = e.target;
  if (target.classList.contains('move-up')) {
    moveItem(target, 'up');
  } else if (target.classList.contains('move-down')) {
    moveItem(target, 'down');
  } else if (target.classList.contains('delete')) {
    var li = target.parentNode;
    li.parentNode.removeChild(li);
  }
});
 
function moveItem(button, direction) {
  var li = button.parentNode;
  var ul = li.parentNode;
  var index = Array.prototype.indexOf.call(ul.children, li);
  
  if (direction === 'up' && index > 0) {
    ul.insertBefore(li, ul.children[index - 1]);
  } else if (direction === 'down' && index < ul.children.length - 1) {
    ul.insertBefore(li, ul.children[index + 1].nextSibling);
  }
}    </script>
</body>
</html>